字数
822 字
阅读时间
4 分钟
SPA
single-page application，简称 SPA
——是一种在 web 页面初始化就加载完相应的 HTML 、JavaScript 和 CSS
- 一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转
HTML 内容的变换和UI 与用户的交互取决于路由机制的实现，避免了页面的重新记载
优点
- 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
- 基于上面一点，SPA 相对服务器压力小
- 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理
缺点
- 初次加载耗时多：为实现单页 Web 应用功能及显示效果，在初次加载时将 JavaScript 和 CSS 统一加载，部分页面按需加载
- 前后退路由管理：由于单页面应用是在一个页面显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理
- 不利于 SEO：由于所有的内容都在一个页面进行动态切换显示，所以在 SEO 上有着天然的劣势
SEO
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。 — 百度百科
SEO 参数指标：
- 搜索引擎对网站收录的数量
- 网站的索引量（和收录的差异：收录会展示给用户）
- 反链/正链
- 关键词
- TDK（多个页面） …
SEO 关注点：
- SEO 优化重要的还是网站的主题，内容，关键字，原创文章，更新频率。（重要）
- 增加友链和反链
- 每个页面进行 TDK （标题，关键字和描述）
- 整天页面量（可以被爬虫爬到）
SPA 未优化的 SEO 举例
搜索引擎爬虫在抓取这样的页面的时，在未做任何优化的情况下，通常拿到的是类似下面的字符文本，
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>除了可以事先定义的 title（可能 title 也不能事先确定），在 SPA 下很多内容需要通过 ajax 请求 server 拿到数据通过脚本执行产生。通常爬虫不会有类似浏览器的执行环境去产生这些内容。
优化方案
- SSR（Server-side Render — 服务器端渲染）
- Prerender（预渲染）
具体方案参考：关于SPA的SEO解决方案 | medium
参考
关于SEO的研究和SPA 项目得SEO优化
关于SPA的SEO解决方案 | medium
贡献者
jiechen